/* Flowchart variables */
/* Sequence Diagram variables */
/* Gantt chart variables */
.mermaid .label {
    font-family: 'trebuchet ms', verdana, arial;
    color: #333;
  }
  .node rect,
  .node circle,
  .node ellipse,
  .node polygon {
    fill: #cde498;
    stroke: #13540c;
    stroke-width: 1px;
  }
  .edgePath .path {
    stroke: green;
    stroke-width: 1.5px;
  }
  .edgeLabel {
    background-color: #e8e8e8;
  }
  .cluster rect {
    fill: #cdffb2 !important;
    rx: 4  !important;
    stroke: #6eaa49 !important;
    stroke-width: 1px !important;
  }
  .cluster text {
    fill: #333;
  }
  .actor {
    stroke: #13540c;
    fill: #cde498;
  }
  text.actor {
    fill: black;
    stroke: none;
  }
  .actor-line {
    stroke: grey;
  }
  .messageLine0 {
    stroke-width: 1.5;
    stroke-dasharray: "2 2";
    marker-end: "url(#arrowhead)";
    stroke: #333;
  }
  .messageLine1 {
    stroke-width: 1.5;
    stroke-dasharray: "2 2";
    stroke: #333;
  }
  #arrowhead {
    fill: #333;
  }
  #crosshead path {
    fill: #333 !important;
    stroke: #333 !important;
  }
  .messageText {
    fill: #333;
    stroke: none;
  }
  .labelBox {
    stroke: #326932;
    fill: #cde498;
  }
  .labelText {
    fill: black;
    stroke: none;
  }
  .loopText {
    fill: black;
    stroke: none;
  }
  .loopLine {
    stroke-width: 2;
    stroke-dasharray: "2 2";
    marker-end: "url(#arrowhead)";
    stroke: #326932;
  }
  .note {
    stroke: #6eaa49;
    fill: #fff5ad;
  }
  .noteText {
    fill: black;
    stroke: none;
    font-family: 'trebuchet ms', verdana, arial;
    font-size: 14px;
  }
  /** Section styling */
  .section {
    stroke: none;
    opacity: 0.2;
  }
  .section0 {
    fill: #6eaa49;
  }
  .section2 {
    fill: #6eaa49;
  }
  .section1,
  .section3 {
    fill: white;
    opacity: 0.2;
  }
  .sectionTitle0 {
    fill: #333;
  }
  .sectionTitle1 {
    fill: #333;
  }
  .sectionTitle2 {
    fill: #333;
  }
  .sectionTitle3 {
    fill: #333;
  }
  .sectionTitle {
    text-anchor: start;
    font-size: 11px;
    text-height: 14px;
  }
  /* Grid and axis */
  .grid .tick {
    stroke: lightgrey;
    opacity: 0.3;
    shape-rendering: crispEdges;
  }
  .grid path {
    stroke-width: 0;
  }
  /* Today line */
  .today {
    fill: none;
    stroke: red;
    stroke-width: 2px;
  }
  /* Task styling */
  /* Default task */
  .task {
    stroke-width: 2;
  }
  .taskText {
    text-anchor: middle;
    font-size: 11px;
  }
  .taskTextOutsideRight {
    fill: black;
    text-anchor: start;
    font-size: 11px;
  }
  .taskTextOutsideLeft {
    fill: black;
    text-anchor: end;
    font-size: 11px;
  }
  /* Specific task settings for the sections*/
  .taskText0,
  .taskText1,
  .taskText2,
  .taskText3 {
    fill: white;
  }
  .task0,
  .task1,
  .task2,
  .task3 {
    fill: #487e3a;
    stroke: #13540c;
  }
  .taskTextOutside0,
  .taskTextOutside2 {
    fill: black;
  }
  .taskTextOutside1,
  .taskTextOutside3 {
    fill: black;
  }
  /* Active task */
  .active0,
  .active1,
  .active2,
  .active3 {
    fill: #cde498;
    stroke: #13540c;
  }
  .activeText0,
  .activeText1,
  .activeText2,
  .activeText3 {
    fill: black !important;
  }
  /* Completed task */
  .done0,
  .done1,
  .done2,
  .done3 {
    stroke: grey;
    fill: lightgrey;
    stroke-width: 2;
  }
  .doneText0,
  .doneText1,
  .doneText2,
  .doneText3 {
    fill: black !important;
  }
  /* Tasks on the critical line */
  .crit0,
  .crit1,
  .crit2,
  .crit3 {
    stroke: #ff8888;
    fill: red;
    stroke-width: 2;
  }
  .activeCrit0,
  .activeCrit1,
  .activeCrit2,
  .activeCrit3 {
    stroke: #ff8888;
    fill: #cde498;
    stroke-width: 2;
  }
  .doneCrit0,
  .doneCrit1,
  .doneCrit2,
  .doneCrit3 {
    stroke: #ff8888;
    fill: lightgrey;
    stroke-width: 2;
    cursor: pointer;
    shape-rendering: crispEdges;
  }
  .doneCritText0,
  .doneCritText1,
  .doneCritText2,
  .doneCritText3 {
    fill: black !important;
  }
  .activeCritText0,
  .activeCritText1,
  .activeCritText2,
  .activeCritText3 {
    fill: black !important;
  }
  .titleText {
    text-anchor: middle;
    font-size: 18px;
    fill: black;
  }
  /*
  
  
  */
  g.classGroup text {
    fill: #13540c;
    stroke: none;
    font-family: 'trebuchet ms', verdana, arial;
    font-size: 14px;
  }
  g.classGroup rect {
    fill: #cde498;
    stroke: #13540c;
  }
  g.classGroup line {
    stroke: #13540c;
    stroke-width: 1;
  }
  svg .classLabel .box {
    stroke: none;
    stroke-width: 0;
    fill: #cde498;
    opacity: 0.5;
  }
  svg .classLabel .label {
    fill: #13540c;
  }
  .relation {
    stroke: #13540c;
    stroke-width: 1;
    fill: none;
  }
  .composition {
    fill: #13540c;
    stroke: #13540c;
    stroke-width: 1;
  }
  #compositionStart {
    fill: #13540c;
    stroke: #13540c;
    stroke-width: 1;
  }
  #compositionEnd {
    fill: #13540c;
    stroke: #13540c;
    stroke-width: 1;
  }
  .aggregation {
    fill: #cde498;
    stroke: #13540c;
    stroke-width: 1;
  }
  #aggregationStart {
    fill: #cde498;
    stroke: #13540c;
    stroke-width: 1;
  }
  #aggregationEnd {
    fill: #cde498;
    stroke: #13540c;
    stroke-width: 1;
  }
  #dependencyStart {
    fill: #13540c;
    stroke: #13540c;
    stroke-width: 1;
  }
  #dependencyEnd {
    fill: #13540c;
    stroke: #13540c;
    stroke-width: 1;
  }
  #extensionStart {
    fill: #13540c;
    stroke: #13540c;
    stroke-width: 1;
  }
  #extensionEnd {
    fill: #13540c;
    stroke: #13540c;
    stroke-width: 1;
  }
  .node text {
    font-family: 'trebuchet ms', verdana, arial;
    font-size: 14px;
  }
  div.mermaidTooltip {
    position: absolute;
    text-align: center;
    max-width: 200px;
    padding: 2px;
    font-family: 'trebuchet ms', verdana, arial;
    font-size: 12px;
    background: #cdffb2;
    border: 1px solid #6eaa49;
    border-radius: 2px;
    pointer-events: none;
    z-index: 100;
  }